<template>
  <div class="view-wrapper">
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="主播姓名：" prop="anchorId">
          <el-select v-model="queryParams.anchorId" filterable placeholder="请选择">
            <el-option v-for="item in anchorList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="中控人员：" prop="centerControlId">
          <el-select v-model="queryParams.centerControlId" filterable placeholder="请选择">
            <el-option
              v-for="item in centerControlList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播客户" prop="clientName">
          <el-input
            v-model="queryParams.clientName"
            placeholder="请填写"
            clearable
          />
        </el-form-item>
        <el-form-item label="客户类型：" prop="clientType">
          <el-select v-model="queryParams.clientType" placeholder="请选择">
            <el-option
              v-for="item in clientTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播日期">
          <el-date-picker
            clearable
            v-model="date"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
            placeholder="请选择"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播时间">
          <el-time-select
            placeholder="起始时间"
            v-model="queryParams.startTime"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00'
            }">
          </el-time-select>
          至
          <el-time-select
            placeholder="结束时间"
            v-model="queryParams.endTime"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00',
              minTime: queryParams.startTime
            }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="客户负责人：" prop="clientNamePrincipalId">
          <el-select
            v-model="queryParams.clientNamePrincipalId"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in responsiblePersonList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <div class="right">
          <el-button type="primary" @click="lookCalendar">以日历形式查看排期</el-button>
          <export-excel-button
            title="排班明细"
            action="/client/live/schedule/export"
            :params="queryParams"
          />
        </div>
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tabList"
        stripe
        border
        tooltip-effect="dark"
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="64px"
        />
        <el-table-column label="直播日期" prop="workforceDate"></el-table-column>
        <el-table-column label="直播时间" prop="liveTime"></el-table-column>
        <el-table-column label="场次" prop="sessionNo"></el-table-column>
        <el-table-column label="直播地点" prop="liveRoomName"></el-table-column>
        <el-table-column label="实际开播时间" prop="realLiveTime" width="100"></el-table-column>
        <el-table-column label="实际直播时长" prop="realTime"></el-table-column>
        <el-table-column label="主播姓名" prop="anchorList">
          <template slot-scope="scope">
            <div class="nameBox">
              <div class="nameItem" v-for="(item,index) in scope.row.anchorList	" :key="index" @click="anchorDetail(item.id)">{{item.name}}<span v-if="index < scope.row.anchorList.length - 1">、</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="中控人员" prop="serviceTime"> 
          <template slot-scope="scope">
            <div class="nameBox">
              <div class="nameItem" v-for="(item,index) in scope.row.centerControlList	" :key="index" @click="controlDetail(item.id)">{{item.name}}<span v-if="index < scope.row.centerControlList.length - 1">、</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="关联服务工单" prop="serviceItemRecordId"></el-table-column>
        <el-table-column label="直播客户" prop="clientName"></el-table-column>
        <el-table-column label="客户负责人" prop="clientNamePrincipal"></el-table-column>
        <el-table-column label="客户类型" prop="clientType"></el-table-column>
        <el-table-column label="直播状态" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="statusList" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="投流费（元）" prop="flowCost"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column  label="操作" align="center" width="180" class-name="small-padding fixed-width"  fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      ></pagination>
    </div>
    <Dialog
      v-bind="$attrs"
      v-if="dialogVisible"
      :id="id"
      :pathType="pathType"
      :visible.sync="dialogVisible"
      @success="_handleSuccess"
    >
    </Dialog>
  </div>
</template>
  
  <script>
import {
  getList,
  userSelect,
  responsibleSelect,
} from "@/api/customer/rowDateList";
import Dialog from "./components/dialog";

import ExportExcelButton from "@/components/ExportExcelButton/index";

export default {
  name: "",
  components: {
    Dialog,
    ExportExcelButton,
  },
  data() {
    return {
      dialogId: "",
      dialogVisible: false,
      removeDialogVisible: false,
      // 遮罩层
      loading: false,
      // 导出遮罩层
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      pathType: "add",
      current: "",
      // 查询参数
      queryParams: {
        anchorId: '',//主播姓名
        pageNum: 1,
        pageSize: 10,
        centerControlId: "", //	中控人员
        clientName: '', //直播客户
        clientNamePrincipalId: "", //客户负责人Id
        clientType: "", //客户类型 bee_client_type
        endDate: "", //直播日期结束时间 yyyy-MM-dd
        startDate: "", //直播日期开始时间 yyyy-MM-dd

        endTime: "", //直播时间结束时间
        startTime: "", //直播时间开始时间
        status: "", //直播状态 live_schedule_status 1 待开始 2进行中 3 已完成 4 未完成
      },
      date: [],
      industryList: [],
      
      
      timeTypeList: [
        { id: 1, value: "创建时间" },
        { id: 2, value: "最后更新时间" },
        { id: 3, value: "服务时间" },
      ],
      anchorList: [{ id: "", value: "全部" }],//主播
      centerControlList: [{ id: "", value: "全部" }],//中控人员
      clientTypeList: [{ id: "", value: "全部" }], //客户来源
      statusList: [{ id: "", value: "全部" }], //客户级别
      responsiblePersonList: [],
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ids: this.ids,
      };
      return params;
    },
  },
  created() {
    this.getAnchor();
    this.getControl();

    this.getDict();
    this.getresponsiblePersonList()
    this.getList();
  },
  methods: {
   
   //主播下拉
   getAnchor() {
      var data = {
        roleType: 1,
        status: '',
      }
      userSelect(data).then((res) => {
        this.anchorList = this.anchorList.concat(res.result);
      });
    },
    //中控人员下拉
    getControl() {
      var data = {
        roleType: 2,
        status: '',
      }
      userSelect(data).then((res) => {
        this.centerControlList = this.centerControlList.concat(res.result);
      });
    },
  
    //获取状态字典
    getDict() {
      var dictType =
        "bee_client_type,live_schedule_status ";
      this.$getSelectList(dictType)
        .then((res) => {
          this.clientTypeList = this.clientTypeList.concat(res.result[0].dictList)  
          this.statusList = this.statusList.concat(res.result[1].dictList)
        })
        .finally(() => {
          this.loading = false;
        });
    },

    //客户负责人下拉
    getresponsiblePersonList() {
      var params = {
        authorityType: 1 
      }
      responsibleSelect(params)
        .then((res) => {
          this.responsiblePersonList = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
      console.log("this.industryList", this.industryList);
    },
    /* 查询全部列表 */
    getAllList() {
      this.loading = true;
      getAllList(this.queryParams).then((response) => {
        response.result.records.forEach((item) => {
          for (var key in item) {
            if (item[key] === "") {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((response) => {
        response.result.records.forEach((item) => {
          for (var key in item) {
            if (item[key] === "") {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    //处理时间
    changeTime(e) {
      this.queryParams.startDate = e[0];
      this.queryParams.endDate = e[1];
    },
    // 表单重置
    reset() {
      this.date = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.resetForm("queryParams");
      this.handleQuery();
    },
    //新增
    addClick() {
      this.dialogVisible = true;
      this.pathType = "add";
    },
    //编辑
    editClick(row) {
      this.$router.push({
        path: "/customer/workforceManagement/rowDateEdit",
        query: {
          id: row.id,
        },
      });
    },
    // 主播详情
    anchorDetail(id){
      console.log('id',id)
      this.$router.push({
        path: "/customer/workforceManagement/calendarDetail",
        query: {
          id: id,
        },
      })
    },

    // 中控人员详情
    controlDetail(id){
      console.log('id',id)
      this.$router.push({
        path: "/customer/workforceManagement/calendarDetail",
        query: {
          id: id,
        },
      })
    },

    
    //切换列表
    handleNav(id) {
      this.current = id;
      this.queryParams.pageNum = 1;
      if (this.hasAllPermission == 1 && id == "") {
        this.getAllList();
      } else {
        this.getList();
      }
    },
    sortChange({ column, prop, order }) {
      console.log("order", order);
      if (prop == "completionRate") {
        this.queryParams.sort = 1;
        if (order == "ascending") {
          this.queryParams.sortType = 1;
        } else if (order == "descending") {
          this.queryParams.sortType = 2;
        } else {
          this.queryParams.sortType = 2;
        }
      }
      if (this.hasAllPermission == 1 && this.current == "") {
        this.getAllList();
      } else {
        this.getList();
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");

      this.reset();
    },

    //就日历查看
    lookCalendar(){
      this.$router.push({
        path: "/customer/workforceManagement/calendarList",
        // query: {
        //   id: this.id,
        //   pathType: 'historyIndex'
        // },
      })
    },
    _handleSuccess(e) {
      //成功回调
 
      this.getPermission();
    },
  },
};
</script>
  <style  lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  .right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.img_box {
  width: 100px;
  height: 80px;
  border-radius: 4px;
}
.nameBox{
  z-index: 9999;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .nameItem{
    cursor: pointer;
  }
  .nameItem:hover{
    color: #1890ff;
  }
}
</style>
    